<template>
  <div class="detailView">
    <closePanel @closePanelfunc="closePanelfunc" :closetitle=closetitle></closePanel>
    <div class="container">
      <div class="basicinfo">
        <div class="title">
          <p>基本信息</p>
        </div>
        <div class="content">
          <p class="gjName">数丰科技</p>
          <p class="gjInfo">名称：北京数丰科技有限公司</p>
          <p class="gjInfo">类型：信息技术</p>
          <p class="gjInfo">电话：0551-65883001</p>
          <p class="gjInfo">地址：安徽省合肥市高新区望江西路与金桂路交口鲲鹏国际广场6号楼701室</p>
          <div id="chartbox"></div>
        </div>
      </div>
      <div class="qyintroduction ryglGjRight">
        <div class="title">
          <p>企业简介</p>
        </div>
        <div class="content">XXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
      </div>
      <div class="qyphoto ryglGjRight">
        <div class="videoBtn" @click="openQyVideo">视频监控</div>
        <div class="title">
          <p>企业照片</p>
        </div>
        <div class="content">
          <ul>
            <li>
              <img src="https://www.baidu.com/img/bd_logo1.png?qua=high">
            </li>
            <li>
              <img src="https://www.baidu.com/img/bd_logo1.png?qua=high">
            </li>
            <li>
              <img src="https://www.baidu.com/img/bd_logo1.png?qua=high">
            </li>
          </ul>
        </div>
      </div>
      <div class="cpphoto ryglGjRight">
        <div class="title">
          <p>产品照片</p>
        </div>
        <div class="content">
          <ul>
            <li>
              <img src="https://www.baidu.com/img/bd_logo1.png?qua=high">
            </li>
            <li>
              <img src="https://www.baidu.com/img/bd_logo1.png?qua=high">
            </li>
            <li>
              <img src="https://www.baidu.com/img/bd_logo1.png?qua=high">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import closePanel from "./closePanel.vue"; 
export default {
  name: "detailView",
  props: [],
  components: { closePanel },
  data() {
    return {
        closetitle:"详情"
    };
  },
  mounted() {
    this.initBarChart();
  },
  computed: {},
  methods: {
    ...mapMutations(["changeDetailViewLayer","changeQyVideoLayer"]),
    initBarChart() {
      var colors = ["#0FF9FF", "#FF7C67", "#FFFF59"];
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("chartbox"));

      // 指定图表的配置项和数据
      var option = {
        color: colors,
        tooltip: {
          trigger: "axis"
        },
        toolbox: {
          top: 10,
          left: 10,
          feature: {
            magicType: {
              show: true,
              type: ["line", "bar"]
            }
          }
        },
        legend: {
          top: 30,
          right: 0,
          orient: "vertical",
          data: ["总产值", "利润", "纳税额"],
          textStyle: {
            color: "rgba(255,255,255,0.8)"
          }
        },
        xAxis: {
          data: ["2015年", "2016年", "2017年"],
          axisLabel: {
            color: "rgba(255,255,255,0.8)"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#474747"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#474747"
            }
          }
        },
        yAxis: {
          axisLabel: {
            rotate: 60,
            color: "rgba(255,255,255,0.8)"
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#474747"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#474747"
            }
          }
        },
        series: [
          {
            name: "总产值",
            type: "bar",
            data: [1031.6, 1152.9, 1404.1]
          },
          {
            name: "利润",
            type: "bar",
            data: [930.9, 981.2, 955.9]
          },
          {
            name: "纳税额",
            type: "bar",
            data: [883.4, 979.2, 1056.8]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    closePanelfunc() {
      this.$store.commit("changeDetailViewLayer", false);
    },
    openQyVideo(){
      this.$store.commit("changeQyVideoLayer", true);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
.detailView {
  z-index: 1300;
  width: 90vw;
  height: calc(100vh - 30px);
  margin-left: 5vw;
  margin-top: 15px;
  position: relative;
  .container {
    width: 100%;
    height: calc(100% - 30px);
    border: 1px solid #73ffff;
    background-color: rgba(0, 48, 64, 0.6);
  }
  .basicinfo,
  .qyphoto,
  .cpphoto {
    width: 33%;
    float: left;
    height: 50%;
  }
  .basicinfo {
    .gjName {
      padding-left: 10px;
      color: #26ffff;
      font-size: 24px;
      line-height: 50px;
    }
    .gjInfo {
      padding-left: 10px;
      color: #ffffff;
      font-size: 14px;
      font-weight: lighter;
      line-height: 25px;
      margin: 14px 0;
    }
  }
  .ryglGjRight {
    border-radius: 3px;
    background: rgba(0, 48, 64, 0.4);
  }
  .qyintroduction {
    color: #fff;
    font-size: 16px;
    width: 33%;
    float: left;
    height: 100%;
    .content {
      height: calc(100% - 30px);
      padding: 10px;
    }
  }
  .title {
    height: 30px;
    background: url(../images/bg16.png) no-repeat left center;
    p {
      float: left;
      line-height: 30px;
      padding-left: 10px;
      color: #92bacd;
      font-size: 14px;
    }
  }
  #chartbox {
    width: 100%;
    height: 450px;
  }
  .qyphoto,
  .cpphoto {
    position: relative;
    .videoBtn{
      cursor: pointer;
      position: absolute;
      top: 0px;
      right: 10px;
      margin-left: -42px;
      width: 85px;
      height: 30px;
      line-height: 30px;
      color: #FFFFFF;
      font-size: 14px;
      text-align: center;
      background: url(../images/bg20.png) no-repeat center;
    }
    ul {
      li {
        list-style: none;
        display: inline-block;
        width: 100px;
        list-style-type: none;
        margin-top: 10px;
        margin-left: 10px;
        float: left;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        img {
          border: solid 2px #fff;
          width: 100px;
          height: 90px;
        }
      }
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss" >
</style>
